<template>
  <div>
    <!-- 轮播图 -->
    <lunbotu :list="list"></lunbotu>

    <!-- 九宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newslist">
          <!-- <span class="mui-icon mui-icon-home"></span> -->
          <!-- <img src="./menu1.png" > -->
          <svg t="1591841422884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1675" width="200" height="200"><path d="M87.073708 136.250069m56.652836 0l639.46888 0q56.652835 0 56.652835 56.652836l0 774.44426q0 56.652835-56.652835 56.652835l-639.46888 0q-56.652835 0-56.652836-56.652835l0-774.44426q0-56.652835 56.652836-56.652836Z" fill="#3ABDF3" p-id="1676"></path><path d="M587.601509 173.357676H339.320458a53.395297 53.395297 0 0 1-52.262241-43.481051 56.652835 56.652835 0 0 0-0.991424 9.772614 53.395297 53.395297 0 0 0 53.253665 53.253666h248.281051a53.395297 53.395297 0 0 0 53.253666-53.253666 56.652835 56.652835 0 0 0-1.416321-9.772614 53.395297 53.395297 0 0 1-51.837345 43.481051z" fill="#1BB1E0" p-id="1677"></path><path d="M139.619213 192.902905m56.652836 0l534.519502 0q56.652835 0 56.652835 56.652835l0 660.996957q0 56.652835-56.652835 56.652836l-534.519502 0q-56.652835 0-56.652836-56.652836l0-660.996957q0-56.652835 56.652836-56.652835Z" fill="#58D3F9" p-id="1678"></path><path d="M190.040237 313.148548m28.46805 0l327.878285 0q28.46805 0 28.468049 28.46805l0-0.141633q0 28.46805-28.468049 28.46805l-327.878285 0q-28.46805 0-28.46805-28.46805l0 0.141633q0-28.46805 28.46805-28.46805Z" fill="#EDEDED" p-id="1679"></path><path d="M190.040237 465.686307m28.46805 0l470.076901 0q28.46805 0 28.46805 28.46805l0-0.141632q0 28.46805-28.46805 28.46805l-470.076901 0q-28.46805 0-28.46805-28.46805l0 0.141632q0-28.46805 28.46805-28.46805Z" fill="#EDEDED" p-id="1680"></path><path d="M190.040237 604.060858m28.46805 0l470.076901 0q28.46805 0 28.46805 28.468049l0-0.141632q0 28.46805-28.46805 28.46805l-470.076901 0q-28.46805 0-28.46805-28.46805l0 0.141632q0-28.46805 28.46805-28.468049Z" fill="#EDEDED" p-id="1681"></path><path d="M190.040237 742.435408m28.46805 0l470.076901 0q28.46805 0 28.46805 28.46805l0-0.141632q0 28.46805-28.46805 28.46805l-470.076901 0q-28.46805 0-28.46805-28.46805l0 0.141632q0-28.46805 28.46805-28.46805Z" fill="#EDEDED" p-id="1682"></path><path d="M546.386572 369.943015H218.366654a28.326418 28.326418 0 0 1-27.334993-21.244813 28.326418 28.326418 0 0 0 27.334993 35.408022h328.019918a28.326418 28.326418 0 0 0 27.334993-35.408022 28.326418 28.326418 0 0 1-27.334993 21.244813zM688.585188 522.480775H218.366654a28.326418 28.326418 0 0 1-27.334993-21.244814 28.326418 28.326418 0 0 0 27.334993 35.408022h470.218534a28.326418 28.326418 0 0 0 28.326418-28.326417 23.227663 23.227663 0 0 0-1.133057-7.081605 28.326418 28.326418 0 0 1-27.193361 21.244814zM712.096115 630.68769v1.699585a28.326418 28.326418 0 0 1-28.326418 28.326418H213.692796a28.326418 28.326418 0 0 1-23.510927-12.463624 28.326418 28.326418 0 0 0 28.326418 26.626833h470.218533a28.326418 28.326418 0 0 0 28.326418-28.326418 28.326418 28.326418 0 0 0-4.957123-15.862794zM688.585188 799.229876H218.366654a28.326418 28.326418 0 0 1-27.334993-21.386446 29.459474 29.459474 0 0 0-0.991424 7.081605 28.326418 28.326418 0 0 0 28.326417 28.326417h470.218534a28.326418 28.326418 0 0 0 28.326418-28.326417 23.935823 23.935823 0 0 0-1.133057-7.081605 28.326418 28.326418 0 0 1-27.193361 21.386446z" fill="#0EACDD" p-id="1683"></path><path d="M587.601509 66.42545h-54.669986a69.682988 69.682988 0 0 0-139.082711 0h-54.528354a53.253665 53.253665 0 1 0 0 106.50733h248.281051a53.253665 53.253665 0 0 0 0-106.50733z m-124.211341 13.313416a28.326418 28.326418 0 1 1 28.326417-28.326418 27.618257 27.618257 0 0 1-28.326417 28.326418z" fill="#FCB85E" p-id="1684"></path></svg>
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photolist">
          <svg t="1591841282007" class="icon" viewBox="0 0 1114 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="892" width="200" height="200"><path d="M470.83393 782.438468h161.51414v131.109411h-161.51414z" fill="#F94E4E" p-id="893"></path><path d="M27.768481 913.547879m49.737216 0l948.170605 0q49.737216 0 49.737217 49.737216l0 0q0 49.737216-49.737217 49.737216l-948.170605 0q-49.737216 0-49.737216-49.737216l0 0q0-49.737216 49.737216-49.737216Z" fill="#F4D967" p-id="894"></path><path d="M70.299952 0a70.299952 70.299952 0 0 0-70.299952 70.299952v641.311314a70.299952 70.299952 0 0 0 70.299952 70.299952h73.2877L938.328612 0z" fill="#FFC255" p-id="895"></path><path d="M1103.00625 711.611266V70.299952a70.299952 70.299952 0 0 0-70.299952-70.299952h-94.377686L143.587652 781.911218h889.118646a70.299952 70.299952 0 0 0 70.299952-70.299952z" fill="#F9AC30" p-id="896"></path></svg>
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodslist">
          <svg t="1591841326150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1022" width="200" height="200"><path d="M681.822618 136.060666l50.642928-50.642928v197.507419a23.295747 23.295747 0 0 0 23.295746 23.295746 23.126937 23.126937 0 0 0 23.295747-23.295746v-202.571712l50.642928 55.369601a25.152654 25.152654 0 0 0 36.800528 0.16881 24.983844 24.983844 0 0 0 1.350478-35.618859L785.303 10.803825a33.761952 33.761952 0 0 0-48.448401-1.012859l-90.81965 90.313221a25.152654 25.152654 0 0 0 0 35.787669 25.321464 25.321464 0 0 0 35.787669 0.16881z" fill="#13B1E2" p-id="1023"></path><path d="M681.822618 154.12331l50.642928-50.642928v197.338609a23.295747 23.295747 0 0 0 23.295746 23.295747 23.295747 23.295747 0 0 0 23.295747-23.295747V97.234421l50.642928 55.538411a25.490274 25.490274 0 0 0 36.800528 1.350478A25.152654 25.152654 0 0 0 868.019782 118.166832l-82.716782-89.469173a33.761952 33.761952 0 0 0-48.448401-0.844049L646.034949 118.166832a25.152654 25.152654 0 0 0 0 35.787668 25.152654 25.152654 0 0 0 35.787669 0.16881z" fill="#3ABDF3" p-id="1024"></path><path d="M917.143422 368.511705H521.622156v-154.79855a101.285856 101.285856 0 0 0-101.285855-101.285855H106.856578a101.285856 101.285856 0 0 0-101.285856 101.285855v709.000989a101.285856 101.285856 0 0 0 101.285856 101.285856h810.286844a101.285856 101.285856 0 0 0 101.285856-101.285856V469.79756a101.285856 101.285856 0 0 0-101.285856-101.285855z m-100.104187 478.238048h-599.274645a33.761952 33.761952 0 0 1 0-67.523904h599.274645a33.761952 33.761952 0 0 1 0 67.523904z m0-221.309595H218.439829a33.761952 33.761952 0 0 1 0-67.523903h599.274645a33.761952 33.761952 0 0 1 0 67.523903z" fill="#3ABDF3" p-id="1025"></path><path d="M817.714474 625.440158h-599.274645a33.761952 33.761952 0 0 1-32.411474-25.152654 34.94362 34.94362 0 0 0-2.025717 10.972634 33.761952 33.761952 0 0 0 33.761952 33.761952h599.274645a33.761952 33.761952 0 0 0 33.761952-33.761952 29.541708 29.541708 0 0 0-1.181668-8.609297 33.761952 33.761952 0 0 1-31.905045 22.789317zM817.714474 845.736894h-599.274645a33.761952 33.761952 0 0 1-32.411474-25.152654 33.761952 33.761952 0 0 0 31.736235 44.734586h599.274645a33.761952 33.761952 0 0 0 33.761952-33.761952 28.697659 28.697659 0 0 0-1.350478-8.609297 33.761952 33.761952 0 0 1-31.736235 22.789317z" fill="#0EACDD" p-id="1026"></path></svg>
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <svg t="1591841342063" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1152" width="200" height="200"><path d="M73.613352 232.856745h160.222531v411.771906H73.613352a35.605007 35.605007 0 0 1-35.605007-35.605007V268.461752a35.605007 35.605007 0 0 1 35.605007-35.605007zM287.421419 232.856745h195.115438v411.949931H287.421419z" fill="#1DAAD6" p-id="1153"></path><path d="M883.62726 866.625869L384.979138 644.628651V232.856745L883.62726 0v866.625869z" fill="#3ABDF3" p-id="1154"></path><path d="M915.849791 0h70.141864v866.625869h-70.141864zM135.566064 560.066759H233.835883v423.877608a40.055633 40.055633 0 0 1-40.055633 40.055633h-17.802503a40.055633 40.055633 0 0 1-40.055633-40.055633V560.066759z" fill="#1DAAD6" p-id="1155"></path></svg>
          <div class="mui-media-body">留言反馈</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <svg t="1591841363331" class="icon" viewBox="0 0 1162 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1281" width="200" height="200"><path d="M1082.599418 103.691174H79.456838a79.456838 79.456838 0 0 0-79.456838 79.456838v761.39515a79.456838 79.456838 0 0 0 79.456838 79.456838h1003.14258a79.456838 79.456838 0 0 0 79.456838-79.456838V183.148012a79.456838 79.456838 0 0 0-79.456838-79.456838zM825.556547 523.819205L560.965276 855.750145a49.26324 49.26324 0 0 1-37.94064 18.672357 48.667313 48.667313 0 0 1-37.543356-17.281862L337.691562 685.911154a49.660524 49.660524 0 0 1 75.483996-64.558681l107.465373 125.541804 227.246557-284.852764a49.660524 49.660524 0 0 1 77.669059 61.777692z" fill="#FFC255" p-id="1282"></path><path d="M79.456838 103.691174h1003.14258a79.456838 79.456838 0 0 1 79.456838 79.456838v132.891561H0V183.148012a79.456838 79.456838 0 0 1 79.456838-79.456838z" fill="#F94E4E" p-id="1283"></path><path d="M0 316.039573h1162.056256v49.660524H0z" fill="#F7B03E" p-id="1284"></path><path d="M216.519884 39.728419m55.818428 0l0 0q55.818429 0 55.818429 55.818429l0 111.438215q0 55.818429-55.818429 55.818429l0 0q-55.818429 0-55.818428-55.818429l0-111.438215q0-55.818429 55.818428-55.818429Z" fill="#EA3939" p-id="1285"></path><path d="M833.899515 39.728419m55.818429 0l0 0q55.818429 0 55.818428 55.818429l0 111.438215q0 55.818429-55.818428 55.818429l0 0q-55.818429 0-55.818429-55.818429l0-111.438215q0-55.818429 55.818429-55.818429Z" fill="#EA3939" p-id="1286"></path><path d="M216.519884 0m55.818428 0l0 0q55.818429 0 55.818429 55.818429l0 111.438215q0 55.818429-55.818429 55.818429l0 0q-55.818429 0-55.818428-55.818429l0-111.438215q0-55.818429 55.818428-55.818429Z" fill="#F4D967" p-id="1287"></path><path d="M833.899515 0m55.818429 0l0 0q55.818429 0 55.818428 55.818429l0 111.438215q0 55.818429-55.818428 55.818429l0 0q-55.818429 0-55.818429-55.818429l0-111.438215q0-55.818429 55.818429-55.818429Z" fill="#F4D967" p-id="1288"></path><path d="M825.556547 523.024636L560.965276 854.161009a49.26324 49.26324 0 0 1-37.94064 18.672357 48.667313 48.667313 0 0 1-37.543356-17.281863L337.691562 685.116586a49.859166 49.859166 0 0 1-6.356547-9.534821 49.660524 49.660524 0 0 0 6.356547 55.023861l146.796508 171.229486a49.461882 49.461882 0 0 0 37.543356 17.281862 49.859166 49.859166 0 0 0 37.94064-18.672357l265.584481-331.930941a49.461882 49.461882 0 0 0 5.164695-53.633366 43.502619 43.502619 0 0 1-5.164695 8.144326z" fill="#F7B03E" p-id="1289"></path></svg>
          <div class="mui-media-body">视频专区</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <svg t="1591841383962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1545" width="200" height="200"><path d="M968.117744 418.778237a88.734248 88.734248 0 0 1-81.960641-57.236977l-3.048123-7.450967a88.903589 88.903589 0 0 1 16.934017-98.555978 56.051596 56.051596 0 0 0 0-78.912519l-52.495453-53.172813a56.051596 56.051596 0 0 0-78.912518 0 89.242269 89.242269 0 0 1-98.725319 16.934017l-7.450967-3.217463a88.903589 88.903589 0 0 1-57.236977-81.791302A55.882256 55.882256 0 0 0 549.339507 0H474.152472a55.882256 55.882256 0 0 0-55.882255 55.882256 88.734248 88.734248 0 0 1-57.236977 81.791301l-7.450968 3.217463a89.072929 89.072929 0 0 1-98.555978-16.934017 56.051596 56.051596 0 0 0-78.912519 0l-52.664792 52.495453a56.051596 56.051596 0 0 0 0 78.912518 89.072929 89.072929 0 0 1 16.934017 98.555979c-1.185381 2.540103-2.201422 4.910865-3.217463 7.450967a88.734248 88.734248 0 0 1-81.791302 57.236977A55.882256 55.882256 0 0 0 0 474.152472v74.679015a55.882256 55.882256 0 0 0 55.882256 55.882255 88.903589 88.903589 0 0 1 81.791301 57.236977c1.016041 2.540103 2.032082 5.080205 3.217463 7.450968a89.242269 89.242269 0 0 1-16.934017 98.725318 56.051596 56.051596 0 0 0 0 78.912519l53.003473 53.003473a56.051596 56.051596 0 0 0 78.912519 0 88.903589 88.903589 0 0 1 98.555978-16.934017l7.450967 3.048123a88.734248 88.734248 0 0 1 57.236977 81.960641 55.882256 55.882256 0 0 0 55.882256 55.882256h74.679015a55.882256 55.882256 0 0 0 55.882255-55.882256 89.072929 89.072929 0 0 1 57.236977-81.960641l7.450968-3.048123a89.242269 89.242269 0 0 1 98.725318 16.934017 56.051596 56.051596 0 0 0 78.912519 0l53.003472-53.003473a56.051596 56.051596 0 0 0 0-78.912519 89.242269 89.242269 0 0 1-16.934016-98.725318l3.048123-7.450968a89.072929 89.072929 0 0 1 81.960641-57.236977 55.882256 55.882256 0 0 0 55.882256-55.882255V474.152472a55.882256 55.882256 0 0 0-56.728957-55.374235z m-456.033074 338.680337a245.204564 245.204564 0 1 1 245.035224-245.373904 245.035224 245.035224 0 0 1-245.035224 245.035224z" fill="#13B761" p-id="1546"></path><path d="M911.727468 430.293369a77.727137 77.727137 0 0 1-71.800231-50.802051l-2.709443-6.604267a77.557797 77.557797 0 0 1 15.240615-86.363486 49.277989 49.277989 0 0 0 0-69.260129l-46.399206-45.721845a49.108649 49.108649 0 0 0-69.090789 0 77.727137 77.727137 0 0 1-86.363486 15.071275l-7.112287-2.540103a77.557797 77.557797 0 0 1-50.802051-71.630891 49.108649 49.108649 0 0 0-48.939308-48.939309H479.232677a49.108649 49.108649 0 0 0-48.939308 48.939309 77.557797 77.557797 0 0 1-50.802051 71.630891l-6.604267 2.709443a77.727137 77.727137 0 0 1-86.363486-15.071275 49.277989 49.277989 0 0 0-69.260129 0l-46.399206 46.399206a49.277989 49.277989 0 0 0 0 69.260129 77.727137 77.727137 0 0 1 15.071275 86.363486c0 2.201422-1.693402 4.402844-2.709442 6.604267a77.557797 77.557797 0 0 1-71.630892 50.80205 49.108649 49.108649 0 0 0-48.261948 48.092608v65.534646a49.108649 49.108649 0 0 0 48.939309 48.939308 77.557797 77.557797 0 0 1 71.630891 50.802051c1.016041 2.201422 1.862742 4.402844 2.709443 6.604267a77.727137 77.727137 0 0 1-15.071275 86.363486 49.108649 49.108649 0 0 0 0 69.090788l46.399206 46.399207a49.277989 49.277989 0 0 0 69.260129 0 77.557797 77.557797 0 0 1 86.363486-15.240616l6.604267 2.709443a77.727137 77.727137 0 0 1 50.80205 71.800232 49.108649 49.108649 0 0 0 48.939309 48.939308h65.534645a49.108649 49.108649 0 0 0 48.939309-48.939308 77.727137 77.727137 0 0 1 50.802051-71.800232l6.604266-2.709443a77.557797 77.557797 0 0 1 86.363486 15.240616 49.108649 49.108649 0 0 0 69.090789 0l46.399206-46.399207a49.108649 49.108649 0 0 0 0-69.090788 77.557797 77.557797 0 0 1-15.240615-86.363486l1.524062-7.620308a77.727137 77.727137 0 0 1 71.800231-50.802051 49.108649 49.108649 0 0 0 48.939309-48.939308V479.232677a49.108649 49.108649 0 0 0-48.939309-48.939308z m-399.642798 296.514635a214.892674 214.892674 0 1 1 214.723334-214.723334 214.892674 214.892674 0 0 1-214.723334 214.723334z" fill="#28C66F" p-id="1547"></path></svg>
          <div class="mui-media-body">联系我们</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
// import "../images/menu1.png";
// const imgs=require("../images/menu1.png");
//引入toast弹窗
import { Toast } from "mint-ui";
//导入轮播图组件
import lunbotu from "./lunbotu.vue";

export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    //只要进到页面就执行getpic()方法
    this.getpic();
  },
  methods: {
    getpic() {
      //获取轮播图数据的方法
      this.$http
        .get("https://api.oioweb.cn/api/biying.php")
        .then(result => {
          console.log(result.body);
          if (result.body.code == 1) {
            console.log("获取数据成功");
            this.list = result.body.data;
          } else {
            console.log("获取数据失败");
            Toast("获取数据失败");
          }
        });
    }
  },
  components:{
    lunbotu
  }
};
</script>

<style scoped>

.mui-grid-view.mui-grid-9{
     background-color: #fff;
     border: none;
}
.mui-grid-view.mui-grid-9 li{
     border: none;
}
.icon{
  background-size: 100% 100%;
  height: 40px;
  width: 40px;
  margin-bottom: 5px;
}
</style>